<!-- 公用的同步周期选择框 -->

<template>
    <div>
        <el-form :model="formItem" :rules="rules" ref="formPeriod" label-width="120px" size="small" class="formPeriod">
            <el-form-item label="源周期" prop="resourceValue">
                <el-select v-model="formItem.resourceValue" placeholder="请选择源周期" style="width: 100%" @change="
                    (e) => {
                        selectChange(e)
                    }
                ">
                    <el-option :label="select.label" :value="select.value.toString()"
                        v-for="(select, sIndex) in resourceList" :key="sIndex"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="目标周期" prop="targetValue">
                <el-checkbox-group v-model="formItem.targetValue" style="display: inline">
                    <el-checkbox v-for="checkItem in targetList.map((t) => t.label)" :label="checkItem" :key="checkItem">
                        {{ checkItem }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-row>
                <el-col :span="10" style="margin-left:120px">
                    <el-button type="primary" style="margin-right: 10px" @click="submitForm('formPeriod')">确定</el-button>
                    <el-button type="info" @click="closeDialog">取消</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { AjaxCommon } from "@/libs/apiCommon";
import { PopupCommon } from "@/libs/popupCommon";
export default {
    props: ["stage", "cfgType"],
    data() {
        return {
            formItem: {
                // 源周期
                resourceValue: "",
                // 目标周期
                targetValue: []
            },
            // 所有周期列表
            periodList: [],
            // 源周期列表
            resourceList: [],
            // 目标周期列表 (除去源周期)
            targetList: [],
            rules: {
                targetValue: [
                    { required: true, message: '请选择目标周期', trigger: ["blur", "change"] },
                ],
                resourceValue: [
                    { required: true, message: '请选择源周期', trigger: ["blur", "change"] },
                ],
            },
        }
    },
    mounted() {
        this.getPeriodList()
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const oldPeriodNo = parseInt(this.formItem.resourceValue)
                    const newPeriodNoList = this.periodList.filter(t => this.formItem.targetValue.includes(t.label)).map(t => t.value)
                    const params = {
                        "oldPeriodNo": oldPeriodNo,
                        "newPeriodNoList": newPeriodNoList,
                        "stage": this.stage,
                        "cfgType": this.cfgType
                    }
                    AjaxCommon("/ccdc/cfg/exp/common/getTip", "post", params).then(res => {
                        if (res.data.code == 200) {
                            PopupCommon.confirm(res.data.message).then(result => {
                                if (result) {
                                    AjaxCommon("/ccdc/cfg/exp/common/sync", "post", params).then(pResult => {
                                        console.log(pResult)
                                        if (pResult.data.code == 200) {
                                            PopupCommon.notify("success", pResult.data.message)
                                            // 关闭弹窗
                                            this.closeDialog()
                                        }
                                        else {
                                            PopupCommon.message("error", pResult.data.message)
                                        }
                                    })
                                }
                            }).catch(err => {
                                console.log(err)
                            })
                        }
                        else {
                            PopupCommon.message("error", res.data.message)
                        }
                    }).catch(err => {
                        PopupCommon.message("error", err.message)
                    })
                } else {
                    PopupCommon.notify("info", "请选择周期！")
                    return false;
                }
            });
        },
        getPeriodList() {
            // 获取周期列表
            let periodList = window.sessionStorage.getItem("periodList")
            if (periodList) {
                periodList = JSON.parse(periodList)
                this.periodList = periodList
                this.resourceList = JSON.parse(JSON.stringify(periodList))
            }
        },
        selectChange(d) {
            console.log(d)
            let newPeriod = JSON.parse(JSON.stringify(this.periodList))
            newPeriod = newPeriod.filter(t => t.value != d)
            this.targetList = newPeriod
        },
        closeDialog() {
            // 关闭弹窗
            this.$emit("periodSelectClose", "")
        }
    }
};
</script>

<style></style>